<template>
    <div id="back">
        <Nav></Nav>

        <Bscroll1 class="content" ref="scroll" :probeType="3"
                 :pull-up-load="true"
                 @pullingUp="loadmore">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </Bscroll1>

        <Tarbar></Tarbar>
    </div>
</template>

<script>
    import Tarbar from "./common/tarbar/Tarbar";
    import Nav from "./common/nav/Nav";
    import Bscroll1 from "./common/scroll/Bscroll";
    import {debounce} from "../../until";
    export default {
        name: "home_m",
        data(){
            return{

            }
        },
        mounted() {
            this.$bus.$on('music_ok',()=>{
                this.refresh();
                // console.log(222)
            })
        },
        methods:{
            loadmore(){
                if(!this.$store.state.music_ok){
                this.$store.state.more_music++;
                }
                this.$refs.scroll&&this.$refs.scroll.finishPullUps();
            },
            refresh(){
                debounce(this.$refs.scroll.fresh1(),50);
            }
        },
        components:{
            Tarbar,
            Nav,
            Bscroll1
        }
    }
</script>

<style scoped>
    #back{
        height: 100%;
        width: 100%;
        background-image: url("../../assets/imgs/mobile/home_back.jpg");
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat:no-repeat;
        position: fixed;
    }
    .content{
        height: calc(100% - 105px);
        overflow: hidden;
        position: absolute;
        top: 54px;
        left: 0;
        right: 0;
    }
</style>